<!-- 幼儿档案页面 -->
<template>
  <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
          <el-form-item label="园所名称：" prop="schoolName">
              <el-select v-model="queryParams.code" @change="selectSchool" clearable filterable placeholder="请选择">
                        <el-option
                          v-for="item in schoolList"
                          :key="item.code"
                          :label="item.title"
                          :value="item.code">
                        </el-option>
                  </el-select>
          </el-form-item>
          <el-form-item label="年级：" prop="grade">
              <el-select v-model="queryParams.grade" placeholder="请选择年级" clearable size="small"  @change="getGradechange">
          <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
        </el-select>
        </el-form-item>
       <el-form-item label="班级：" prop="class">
           <el-select v-model="queryParams.class" placeholder="请选择班级" clearable size="small">
             <el-option v-for="item in classOptions" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="幼儿名称：" prop="name">
                      <el-input
                        v-model="queryParams.childName"
                        placeholder="请输入幼儿名称"
                        clearable
                        size="small"
                      />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable size="small">
          <el-option
            v-for="dict in sexOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
        <el-form-item label="上报日期：" prop="type">
              <el-date-picker
                     v-model="dateTime"
                     type="date"
                     size="small"
                     value-format="yyyy-MM-dd"
                     @change="onChangeDate"
                     placeholder="选择日期">
                   </el-date-picker>
       </el-form-item>
       <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
      </el-form>

      <div class="chhealth-student-list">
      <div>
      <div class="list-main" v-if="studentList.length > 0">
        <div
          class="mian-item"
          v-for="(item, index) in studentList"
          :key="index"
        >
          <div class="item-top">
            <div class="item-left">
              <div class="left-img">
                <img :src="item.headmage" alt="" />
              </div>
              <div class="left-text">
                <p style="font-size: 16px; font-weight: 500">
                  {{ item.studentName }}
                </p>
                <p
                  style="
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                    display: flex;
                  "
                >
                  <dict-tag
                    :options="dict.type.sys_user_sex"
                    :value="item.sex"
                  />
                  <span style="margin-left: 10px">{{ item.age }}岁</span>
                </p>
              </div>
            </div>
            <div class="item-right">
              <el-button type="primary" plain @click="handleView(item)"
                >查看</el-button
              >
            </div>
          </div>
          <div class="item-bott">
            <div class="bott-left">班级:{{ item.className }}</div>
            <div class="bott-right">入园日期:{{ item.studydate }}</div>
          </div>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>


      <!-- <el-table v-loading="loading" :data="fileList" >
            <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
            <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
            <el-table-column  align="center" label="年级"  prop="nature"></el-table-column>
            <el-table-column  align="center" label="班级"  prop="attendance0"></el-table-column>
            <el-table-column  align="center" label="幼儿姓名"  prop="attendance4"></el-table-column>
            <el-table-column  align="center" label="性别" prop="sex" :formatter="sexFormat" />
            <el-table-column  align="center" label="家庭住址" prop="sex" :formatter="sexFormat" />
            <el-table-column  align="center" label="上报时间" prop="time"  />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleView(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
         </el-table> -->


         
      <!-- 健康档案详情 -->
      <el-dialog title="幼儿健康档案详情" :visible.sync="open" width="1200px" append-to-body>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
    <el-row :gutter="15">
      <el-col :span="8">
        <el-form-item label="儿童户籍地址" prop="censusRegister">
          <el-input v-model="formData.censusRegister" :disabled='isDisabled' placeholder="请输入儿童户籍地址" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="儿童身份证号" prop="idCard">
          <el-input v-model="formData.idCard" :disabled='isDisabled' placeholder="请输入儿童身份证号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="幼儿园名称" prop="schoolName">
          <el-input v-model="formData.schoolName" :disabled='isDisabled' placeholder="请输入幼儿园名称" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="监护人姓名" prop="motherName">
          <el-input v-model="formData.motherName" :disabled='isDisabled' placeholder="请输入监护人姓名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="监护人联系电话" prop="motherPhone">
          <el-input v-model="formData.motherPhone" :disabled='isDisabled' placeholder="请输入监护人联系电话" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <p>基本信息</p>
      <el-col :span="8">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" :disabled='isDisabled' placeholder="请输入姓名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="姓别" prop="sex">
          <el-select v-model="formData.sex" :disabled='isDisabled' placeholder="请选择姓别" clearable :style="{width: '100%'}">
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="年龄" prop="age">
          <el-input v-model="formData.age" :disabled='isDisabled' placeholder="请输入年龄" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <div style="width: 100%;height: 100%;display: flex;justify-content: flex-start;">
        <el-col :span="8">
        <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              :disabled='isDisabled'
              clearable
              size="small"
              v-model="formData.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择出生日期"
            >
          </el-date-picker>
        </el-form-item>
      </el-col>
      </div>
    </el-row>
    <el-row :gutter="15">
      <p>既往病史</p>
      <el-form-item  prop="pastHistory">
        <el-radio-group v-model="formData.pastHistory" size="medium">
          <el-radio v-for="(item, index) in dict.type.past_history" :disabled='isDetailDisabled' :key="index" :label="item.value">{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="过敏史" prop="allergicHistory">
        <el-input v-model="formData.allergicHistory" :disabled='isDetailDisabled' type="textarea" placeholder="请输入过敏史"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="监护人姓名" prop="guardianName">
        <el-input v-model="formData.guardianName" :disabled='isDetailDisabled' placeholder="请输入监护人姓名" clearable :style="{width: '30%'}">
        </el-input>
      </el-form-item>
    </el-row>
    <el-row :gutter="15">
      <p>体格检查</p>
      <el-col :span="8">
        <el-form-item label="体重" prop="weight">
          <el-input v-model="formData.weight" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="身高" prop="height">
          <el-input v-model="formData.height" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="皮肤" prop="skin">
          <el-input v-model="formData.skin" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
       <el-col :span="8">
          <div class="flex">
            <el-form-item label="BMI" prop="leftEye">
              <el-input v-model="formData.BMI" :disabled='isDetailDisabled' placeholder="请输入" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="听力数据" prop="leftEyeVision">
              <el-input v-model="formData.leftEyeVision" :disabled='isDetailDisabled' placeholder="请输入" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </div>
      </el-col>
       <el-col :span="8">
          <div class="flex">
            <el-form-item label="左眼" prop="leftEye">
              <el-input v-model="formData.leftEye" :disabled='isDetailDisabled' placeholder="请输入" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="左眼视力" prop="leftEyeVision">
              <el-input v-model="formData.leftEyeVision" :disabled='isDetailDisabled' placeholder="请输入" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </div>
      </el-col>
      <el-col :span="8">
        <el-form-item label="左耳" prop="leftEar">
          <el-input v-model="formData.leftEar" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="口腔牙齿数" prop="oralToothNum">
          <el-input v-model="formData.oralToothNum" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
       <el-col :span="8">
          <div class="flex">
            <el-form-item label="右眼" prop="rightEye">
              <el-input v-model="formData.rightEye" :disabled='isDetailDisabled' placeholder="请输入" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="右眼视力" prop="rightEyeVision">
              <el-input v-model="formData.rightEyeVision" :disabled='isDetailDisabled' placeholder="请输入" clearable
                :style="{width: '100%'}"></el-input>
            </el-form-item>
          </div>
      </el-col>
      <el-col :span="8">
        <el-form-item label="右耳" prop="rightEar">
          <el-input v-model="formData.rightEar" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="口腔龋齿数" prop="decayedTeethNum">
          <el-input v-model="formData.decayedTeethNum" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="头颅" prop="head">
          <el-input v-model="formData.head" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="胸廓" prop="pleural">
          <el-input v-model="formData.pleural" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="脊柱四肢" prop="spineLimbs">
          <el-input v-model="formData.spineLimbs" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="咽部" prop="pharyngeal">
          <el-input v-model="formData.pharyngeal" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="心肺" prop="cardiopulmonary">
          <el-input v-model="formData.cardiopulmonary" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="肝脾" prop="liverSpleen">
          <el-input v-model="formData.liverSpleen" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="外生殖器" prop="externalGenitalia">
          <el-input v-model="formData.externalGenitalia" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="其他" prop="physiqueOthers">
          <el-input v-model="formData.physiqueOthers" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <div>
          <p>检查结果</p>
            <el-col :span="8">
              <el-form-item label="血红蛋白（HB）" prop="hb">
                <el-input v-model="formData.hb" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="丙氨酸氨基转移酶（ALT）" prop="alt">
                <el-input v-model="formData.alt" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="其他" prop="examinationOthers">
                <el-input v-model="formData.examinationOthers" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-form-item label="检查结果" prop="checkResult">
        <el-input v-model="formData.checkResult" :disabled='isDetailDisabled' type="textarea" placeholder="请输入检查结果"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="医生意见" prop="doctorAdvice">
        <el-input v-model="formData.doctorAdvice" :disabled='isDetailDisabled' type="textarea" placeholder="请输入医生意见"
          :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
      </el-form-item>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-form-item label="医生姓名" prop="doctorName">
          <el-input v-model="formData.doctorName" :disabled='isDetailDisabled' placeholder="请输入医生姓名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="体检日期" prop="physicalDate">
            <el-date-picker
              :disabled='isDetailDisabled'
              clearable
              size="small"
              v-model="formData.physicalDate"
              type="date"
              value-format="yyyy-MM-dd "
              placeholder="请选择体检日期"
            >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="检查单位" prop="hospitalName">
          <el-input v-model="formData.hospitalName" :disabled='isDetailDisabled' placeholder="请输入检查单位" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item size="large" v-if="!isDetailDisabled" style="text-align:right">
      <el-button type="primary" @click="childOk">确 定</el-button>
          <el-button @click="childOk">取 消</el-button>
    </el-form-item>
  </el-form>

            <!-- <el-descriptions title="基础信息" class="margin-top"  :column="3">
                    <el-descriptions-item label="姓名">{{childdetailList.name}}</el-descriptions-item>
                    <el-descriptions-item label="身高">{{childdetailList.name}}</el-descriptions-item>
                    <el-descriptions-item label="体重">{{childdetailList.name}}</el-descriptions-item>
                    <el-descriptions-item label="bmi">{{childdetailList.name}}</el-descriptions-item>
                    <el-descriptions-item label="视力">{{childdetailList.name}}</el-descriptions-item>
                    <el-descriptions-item label="听力">{{childdetailList.name}}</el-descriptions-item>
                    <el-descriptions-item label="总结">{{childdetailList.name}}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="病史信息" class="margin-top"  :column="1">
                    <el-descriptions-item label="病史">有关于疾病的信息</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="各器官信息" class="margin-top"  :column="1">
                    <el-descriptions-item label="心脏">健康</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="疫苗接种信息" class="margin-top"  :column="1">
                    <el-descriptions-item label="疫苗">已接种</el-descriptions-item>
                </el-descriptions> -->
            <!-- <div slot="footer" class="dialog-footer"> -->
          <!-- <el-button type="primary" @click="childOk">确 定</el-button>
          <el-button @click="childOk">取 消</el-button> -->
      <!-- </div> -->
    </el-dialog>
  </div>
</template>
<script>
import { specificList,clazzList,classData,studentList } from "@/api/qu/qyyerygk";
import {schoolList } from "@/api/qu/qyyerygk";
import {
  getStudentArchiveslist,
  getStudentArchivesInfo,
} from "@/api/mindSystem/studentfile";
import moment from "moment";
export default {
 name: "ysgyxx",
 dicts: ['sys_user_sex','past_history'],
 data() {
   return {
       schoolCode:'',
       loading:true,
       dateTime:new Date(),
       schoolList:[],
       isDisabled:false,
    isDetailDisabled:false,
    classList: [],
      studentList: [],
        // 性别字典
      sexOptions: [],
        // 查询参数
        queryParams: {
          code:'',
           grade:'',
           class:'',
           childName:'',
           pageNum: 1,
           pageSize: 10,
         },
         gradeOptions:[],
         classOptions:[],
         total:0,
         open:false,
         fileList:[
          {}
         ],
         childdetailList:{
          name:'王五',
          height:'155cm',
          weight:'50kg',
          bmi:21.5,
          vision:5.5,
          hearing:3.8,
          conclusion:'良好',
         },
         formData: {
          schoolCode:null,
          censusRegister: '',
          idCard: '',
          schoolName: '',
          motherName: '',
          motherPhone: '',
          name: '',
          sex: '',
          birthday: '',
          pastHistory: '',
          allergicHistory: '',
          guardianName: '',
          weight: '',
          height: '',
          field132: '',
          field133: '',
          leftEar: '',
          oralToothNum: '',
          rightEar: '',
          decayedTeethNum: '',
          head: '',
          leftEye: '',
          leftEyeVision: '',
          pleural: '',
          spineLimbs: '',
          pharyngeal: '',
          checkResult: '',
          doctorAdvice: '',
          doctorName: '',
          physicalDate: '',
          hospitalName: '',
          middle:'',
          BMI:21.5
        },
      } 
 }, 
 created() {
      this.getDicts("year_type").then(response => {
        this.gradeOptions = response.data;
      });
      this.getDicts("sys_user_sex").then(response => {
      this.sexOptions = response.data;
    });
      this.getschoolList()
 },
 mounted(){
      this.getList()
 },
 methods: {
  async getList() {
      try {
        this.loading = true;
        const data = await getStudentArchiveslist(this.queryParams);
        this.studentList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
      // async getList(){
      //     // this.loading=true;
      //     try {
      //       const obj={
      //         schoolCode:this.queryParams.code,
      //         grade:this.queryParams.grade,
      //         classCode:this.queryParams.class,
      //         name:this.queryParams.childName,
      //         inTime:moment(this.dateTime).format("YYYYMMDD"),
      //         pageNum: this.queryParams.pageNum,
      //         pageSize: this.queryParams.pageSize,
      //       }
      //      const data =  await specificList(obj)
      //      this.fileList=data.rows;
      //      this.fileList=[
      //         {schoolName:'幼儿有'}
      //      ]
      //      this.total=data.total;
      //      this.loading=false;
      //     } catch (error) {
      //       console.log(error);
      //     }
      // },
      //clazzList 获取班级列表
     async  getClazzList(){
          try {
             const obj ={
               schoolCode:this.queryParams.code,
               year:this.queryParams.grade
             }
            const data=  await  clazzList(obj)
            this.classOptions=data.rows
          } catch (error) {
            console.log(error);
          }
      },
       //获取学校列表
      async getschoolList(){
         const data = await schoolList();
         this.schoolList=data.rows;
         this.getClazzList()
     },
     selectSchool(){
          this.getClazzList()
     },
      getGradechange(){
          this.getClazzList()
      },
      onChangeDate(){

      },
           // 序号
     customeIndex(index){
       return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
     },
     handleView(){
          this.open=true
     },
     childOk(){
      this.open=false;
     },
      handleQuery(){},
      resetQuery(){

      },
       // 性别字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex);
    },
  
 }
};
</script>
<style lang="scss" scoped>
.chhealth-student-list {
    margin: 0 30px 20px 30px;
    background-color: #fff;
    padding: 20px;
    .list-main {
      display: flex;
      flex-wrap: wrap;
      .mian-item {
        width: 23%;
        height: 128px;
        padding: 16px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        margin: 0 1% 16px;
        .item-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 18px;
          .item-left {
            display: flex;
            align-items: center;
            p {
              margin: 5px;
            }
            .left-img {
              width: 56px;
              height: 56px;
              margin-right: 17px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
        }
        .item-bott {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
</style>